<template>
    <div class="applyFor">
        <van-nav-bar title="修改密码" left-text="" left-arrow @click-left="onClickLeft" />
      <!-- <div class="topTitle">
        <title-item title1st="请填写修改的资料信息"> </title-item>
      </div> -->
      <div class="Form">
        <van-form @failed="onFailed" @submit="onSubmit">
          <van-cell-group inset>
            <!-- 通过 pattern 进行正则校验 -->
            <van-field
              v-model="phone"
              name="phone"
              label="账号"
              label-width="45"
              placeholder="请输入账号"
              :rules="[{ validator, message: '请输入正确内容' }]"
            />
            <!-- 通过 validator 进行函数校验 -->
            <van-field
              v-model="password"
              label-width="45"
              type="password"
              name="password"
              label="新密码"
              placeholder="请输入新密码"
              :rules="[{ required: true, message: '请新密码' }]"
            >
            <template #button>
                        <van-button
                        @click="sendCode"
                        :disabled="disabled"
                        native-type="button" plain type="success" size="mini">
                        {{codeMsg}}
                        </van-button>
                    </template>
                </van-field>
          </van-cell-group>
          <div style="margin: 16px">
            <van-button round block  native-type="submit"  color="linear-gradient(90deg, #218CC9 0%, #2CB9A4 100%)">
            提交
            </van-button>
          </div>
        </van-form>
        <van-popup v-model:show="showPicker" position="bottom">
          <van-picker
            :columns="columns"
            @confirm="onConfirm"
            @cancel="showPicker = false"
          />
        </van-popup>
      </div>
    </div>
  </template>
  
  <script setup>
  import TitleItem from "@/components/title-item/title-item.vue";
  import { closeToast, showLoadingToast } from "vant";
  import { ref } from "vue";
  import { useRouter } from "vue-router";
const router = useRouter();
  const phone = ref("");
  const password = ref("");
  const result = ref("");
  const showPicker = ref(false);
  const codeNum = ref(6)
  const columns = [
    { text: "杭州", value: "Hangzhou" },
    { text: "宁波", value: "Ningbo" },
    { text: "温州", value: "Wenzhou" },
    { text: "绍兴", value: "Shaoxing" },
    { text: "湖州", value: "Huzhou" },
  ];
  const codeMsg = ref('获取短信验证码')
  const disabled = ref(false)
  const onConfirm = ({ selectedOptions }) => {
    result.value = selectedOptions[0]?.text;
    showPicker.value = false;
  };
  // const value4 = ref("");
  // const pattern = /\d{6}/;
  
  // 校验函数返回 true 表示校验通过，false 表示不通过
  const validator = (val) =>
    /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(
      val
    );
  
  const onFailed = (errorInfo) => {
    console.log("failed", errorInfo);
  };
  const onSubmit = (val)=>{
    console.log(val,'成功的值')
  }
  // 返回按钮
const onClickLeft = () => {
	router.back();
};
    // 获取短信验证码
    const sendCode = ()=> {
      // 验证手机号格式是否正确
      console.log(phone,'phone')
      console.log(validator(phone.value),'11')
      if (!validator(phone.value)) return showNotify({ type: 'danger', message: '请填写电话号码' });;
      // 禁用按钮
      disabled.value = true;
      // 倒计时
      let timer = setInterval(() => {
        codeNum.value--;
        codeMsg.value = `重新发送(${codeNum})`;
      }, 1000);
      // 判断什么时候停止定时器
      setInterval(() => {
        clearInterval(timer);
        codeNum.value = 6;
        disabled.value = false;
        codeMsg.value = "获取短信验证码";
      }, 6000);
    }
  </script>
  
  <style lang="scss" scoped>
  .applyFor {
    padding: 20px;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    color: #1d1b20;
    .topTitle {
      margin-left: -4px;
    }
  }
  </style>
  